import Vue from "vue";
import App from "./App.vue";
import router from "./router";

// 1. 导入组件库
import Vant from "vant";
// 2. 引入组件 css 文件
import "vant/lib/index.css";
// 3. 注册 vant ui 组件库的标签
Vue.use(Vant);
// 导入axios库
import axios from "axios";
// 绑定到原型
Vue.prototype.$axios = axios;

// 创建全局的路由(导航)守卫,记得要放行
router.beforeEach((to, from, next) => {
  if (to.meta.needAuth) {
    if (localStorage.getItem("token")) {
      // 进入个人中心
      next();
    } else {
      // 没有token就跳转回登录页面,跳转登录页面时又会执行导航守卫
      router.push("/login");
    }
  } else {
    next();
  }
});

import { Toast } from "vant";
// 处理请求发送token的请求拦截器:可以获取请求的所有信息
axios.interceptors.request.use((config) => {
  //根据请求头的Authorization属性是否有值和本地存储是否有token判断
  if (!config.headers.Authorization && localStorage.getItem("token")) {
    // 请求头的Authorization属性没有token但本地存储有token就强制加上
    config.headers.Authorization = "Bearer " + localStorage.getItem("token");
  }
  // console.log(config);
  // 最后放行
  return config;
});
// 检查token的第二道防线:拦截器：在请求.then前触发，可以获取到服务器响应的数据，根据数据进行token的检查
axios.interceptors.response.use((res) => {
  // console.log(res);
  // 统一处理响应后时4开头的三位数的错误
  const errRule = /^4\d{2}$/;
  if (errRule.test(res.data.statusCode)) {
    // console.log(res, 1111);
    // 提示错误
    Toast.fail(res.data.message);
  }

  // 检查token数据是否有误
  if (res.data.message === "用户信息验证失败") {
    // console.log(res.data.message);
    // 弹窗提示：由于不是在vue的页面内，所以不能使用this.$toaus提示，需另外注册
    Toast.fail(res.data.message + ",需重新登录");
    // 跳转回登录页面:这里已经进入了个人中心，使用replace跳转，回退就可以回退到首页
    router.replace("/login");
  }
  return res;
});

// axios 默认基准路径
// 本地服务器
// axios.defaults.baseURL = "http://127.0.0.1:3000";
// 线上服务器
axios.defaults.baseURL = "http://157.122.54.189:9083";

Vue.config.productionTip = false;

new Vue({
  router,
  render: function(h) {
    return h(App);
  },
}).$mount("#app");
